<template>
  <div class="staff">
    <div class="header">
      <div class="add">
        <el-button type="primary" @click="addStaff">新增</el-button>
      </div>
      <div class="form">
        <el-form>
          <el-form-item>
            <el-input v-model="keywords" placeholder="请输入员工编号或者姓名" clearable>
              <el-button slot="append" icon="el-icon-search" @click="getStaffByKeyWords"/>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="main table">
      <el-table :data="list" :loading="loading" border fit>
        <el-table-column label="编号" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>

        <el-table-column label="姓名"  align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="入职时间"  align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at}}
          </template>
        </el-table-column>

        <el-table-column label="更新时间"  align="center">
          <template slot-scope="scope">
            {{ scope.row.updated_at}}
          </template>
        </el-table-column>

        <el-table-column label="状态"  align="center">
          <template slot-scope="scope">
            {{ scope.row.status|status }}
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="220" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="editStaff(scope.row)">详情</el-button>
            <el-button v-if="scope.row.status===0" type="warning" @click="opration(scope.row)">启用</el-button>
            <el-button v-if="scope.row.status===1" type="success" @click="opration(scope.row)">禁用</el-button>
            <el-button type="danger" @click="deleteShow(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 删除弹出框 -->
      <el-dialog :visible.sync="isShow" title="提示" width="30%" center>
        <span>确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="isShow === false">取消</el-button>
        </span>
      </el-dialog>

      <!-- <commmon-dialog :is-show="isShow" message="确定删除吗" first-btn="确定" second-btn="删除"/> -->
    </div>
    <pagination
    :total="total"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.limit"
    @pagination="getList" />
  </div>
</template>
<script>
import staffApi from '@/api/staff'
import Pagination from '@/components/Pagination'
import commmonDialog from '@/components/Dialog/index'
import { parseTime } from '@/utils/index'
export default {
  components: {
    commmonDialog,
    Pagination
  },
  filters: {
    // 格式化时间
    parseTime(val) {
      return parseTime(val, '{y}-{m}-{d}')
    },
    // 判断状态
    status(val) {
      switch (val) {
        case 1:
          val = '正常'
          break
        case 0:
          val = '禁用'
          break
        default:
          break
      }
      return val
    }
  },
  data() {
    return {
      list: [],
      keywords: '',
      loading: true,
      isShow: false, // 删除框弹出状态
      id: '', // 员工id
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取员工列表
    async getList(e) {
      const query = {}
      if(e == undefined) {
        query.page = this.listQuery.page - 1,
        query.limit = this.listQuery.limit
      }
      else {
        query.page = e.page - 1,
        query.limit = e.limit
      }
      const result = await staffApi.getStaffs(query)
      this.list = result.data.rows
      this.total = result.data.count
    },
    // 跳转新增员工
    addStaff() {
      this.$router.push({
        name: 'AddStaff'
      })
    },
    // 跳转编辑员工
    editStaff(row) {
      this.$router.push({
        name: 'EditStaff',
        params: { id: row.id }
      })
    },
    // 删除弹出框
    deleteShow(id) {
      this.isShow = true
      this.id = id
    },
    // 提交删除请求
    async onSubmit() {
      await staffApi.deleteStaff(this.id)
      this.isShow = false
      this.$message.success('删除成功')
      this.reload()
    },
    // 禁用，启用员工
    async opration(row) {
      const data = {
        status: 1
      }
      if (row.status === 0) {
        await staffApi.updateStatus(data, row.id)
        this.$message.success('启用成功')
      } else {
        data.status = 0
        await staffApi.updateStatus(data, row.id)
        this.$message.warning('禁用成功')
      }
      this.reload()
    },
    // 根据搜索关键字获取商品
    async getStaffByKeyWords() {
      if(this.keywords) {              //搜索关键字不为空
        const query = {}
        if(Number(this.keywords)) {
          query.id = this.keywords
        }else {
          query.name = this.keywords
        }
        const result = await staffApi.getStaffByKeyWords(query)
        if(result.code == 0) {
          this.list = []
          this.list = result.data
        }
      }else {                        // 搜索关键字为空
        this.getList()
      }
    }
  },
  inject: ['reload']
}
</script>
<style lang="less" scoped>
  .staff {
    margin: 30px;
    position: relative;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
</style>
